<template>
    <my-card-title title="本月报名趋势" id="test" ref="test">
        <v-chart :options="optionData" style="height: 300px;padding: 40px 30px 10px;width: 100%" ref="bar"/>
    </my-card-title>
</template>

<script>
    import ECharts from 'vue-echarts';
    import 'echarts/lib/chart/bar';
    import elementResizeDetectorMaker from 'element-resize-detector';

    export default {
        name: 'Barchart',
        components: {
            'v-chart': ECharts,
        },
        props: {
            id: {
                type: String,
            },
            height: {
                type: String,
                default: '300',
            },
            data: {
                type: Array,
            },
        },
        data () {
            return {
                myStyle: {height: this.height + 'px'},
                optionData: null,
            };
        },
        created () {
            const _this = this;
            setTimeout(()=>{
                _this.optionData = {
                    tooltip: {
                        show: false,
                    },
                    xAxis: {
                        show: true,
                        boundaryGap: true,
                        type: 'category',
                        axisTick: {show: false},
                        axisLine: {show: false},
                        axisLabel: {
                            textStyle: {
                                color: '#9ea0a5',
                            },
                        },
                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
                               15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
                               27, 28, 29, 30, 31],
                    },
                    grid: {
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 30,
                    },
                    yAxis: {
                        position: 'right',
                        splitNumber: 3,
                        silent: true,
                        axisLine: {show: false},
                        axisTick: {show: false},
                        axisLabel: {
                            inside: true,
                            margin: 0,
                            showMinLabel: false,
                            showMaxLabel: false,
                            padding: [20, 0, 0, 0],
                            textStyle: {
                                color: '#9ea0a5',
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#eaedf3',
                            },
                        },
                    },
                    series: [{
                        symbol: 'none',
                        type: 'bar',
                        barWidth: 14,
                        label: {
                            show: false,
                        },
                        itemStyle: {
                            color: '#1565d8',
                        },
                        data: this.data,
                    }],
                };
            }, 1000);
        },
        mounted () {
            const erd = elementResizeDetectorMaker();
            const _this = this;
            const ele = this.$refs.test.$el;
            erd.listenTo(ele, () => {
                if (_this.timer) {
                    clearTimeout(_this.timer);
                }
                _this.timer = setTimeout(() => {
                    _this.$refs.bar.resize();
                }, 500);
            });
        },
        computed: {},
        methods: {},
        destroyed () {
            this.timer = null;
        },
    };
</script>

<style>
</style>
